<template>
  <div>
    <div class="wookroom_right_sider item">
      <ul class="wookroom_right_area">
        <li class="wookroom_right_area_item" v-for="item in ARRAYDATA" >
                <span @mouseenter="item.tag = true" @mouseleave="item.tag = false" class="wookroom_item_namearea">
                    <img :src="item.src" v-show="!item.tag"/>
                    <img :src="item.src1" v-show="item.tag"/>
                    <span :class="item.tag ? 'wookroom_right_name focus' : 'wookroom_right_name' ">{{ item.name }}</span>
                </span>
          <ul class="wookroom_right_area_children" v-if="item.children.length !=0 " v-show="item.tag" @mouseenter="item.tag = true" @mouseleave="item.tag = false">
            <li v-for="t in item.children" @mouseenter="t.tag = true" @mouseleave="t.tag = false" :title="t.name">
              <img :src="t.src" v-show="!t.tag"/>
              <img :src="t.src1" v-show="t.tag"/>
              <span :class="t.tag ? 'wookroom_right_children_name focus' : 'wookroom_right_children_name' " @click="menuListShow(t.name,t.paneName)" >{{ t.name}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <component :is="cut" @closePane="closePane" ref="cut"></component>
  </div>
</template>

<script>
  import ParticleEffect from '@/components/FunctionalUnit/ParticleEffect'
  import position from '@/components/FunctionalUnit/position'
  import test from '@/components/FunctionalUnit/test'
  export default {
    name: "menu-list",
    data:function () {
      return {
        cut:null,
        ARRAYDATA:[{
          'name':'图层',
          'src':'static/IMG/icon/底图.png',
          'src1':'static/IMG/icon_click/底图.png',
          'tag':false,
          'children':[{'name':'图层列表','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'position'}]
        },
          {
            'name':'场景',
            'src':'static/IMG/icon/量测.png',
            'src1':'static/IMG/icon_click/量测.png',
            'tag':false,
            'children':[
              {'name':'浏览方式','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'浏览边界','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'拾取高亮','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'地下模式','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'市内模式','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'街景查看','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'图层符号化','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'三维分屏','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'二三维联动','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'特效','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'粒子系统','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'光照','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'图层高程夸张','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'}]
          },
          {
            'name':'测量',
            'src':'static/IMG/icon/分析.png',
            'src1':'static/IMG/icon_click/分析.png',
            'tag':false,
            'children':[
              {'name':'水平距离测量','src':'static/IMG/icon/通视分析.png','src1':'static/IMG/icon_click/通视分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'空间距离测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'垂直高度测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'直线距离测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'球面距离测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'平面面积测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'三维表面面积测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'体积方量测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'角度测量','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'}]
          },
          {
            'name':'分析',
            'src':'static/IMG/icon/分析.png',
            'src1':'static/IMG/icon_click/分析.png',
            'tag':false,
            'children':[
              {'name':'等高线分析','src':'static/IMG/icon/通视分析.png','src1':'static/IMG/icon_click/通视分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'坡度分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'最佳路径分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'地形剖面分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'洪水淹没分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'土方量分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'通视分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'视域分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'空间分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'},
              {'name':'阴影分析','src':'static/IMG/icon/等高线分析.png','src1':'static/IMG/icon_click/等高线分析.png','tag':false,'paneName':'ParticleEffect'}]
          }]
      }
    },
    components:{
      'ParticleEffect':ParticleEffect,
      'test':test,
      'position':position
    },
    methods:{
      menuListShow:function (title,d) {
        //this.cut=d;//创建子组件
        var dd=null;
        var area=[];
        var offset=[];
        switch (d) {
          case 'ParticleEffect':
            dd=ParticleEffect;
            area=['200px','200px'];
            offset=[document.body.clientWidth-420,200];
            break;
          case 'test':
            dd=test;
            area=['200px','200px'];
            offset=[document.body.clientWidth-420,200];
            break;
          case 'position':
            dd=position;
            area=['500px','400px'];
            offset=[document.body.clientWidth-520,300];
            break;
        }
        this.Layer.closeAll();

        this.Layer.iframe({
          content: {
            content: dd, //传递的组件对象
            parent: this,//当前的vue对象
            data:{}//props
          },
          offset:offset,
          area:area,
          title: title,
          shade:false
        });
      },
      geta:function (item) {
       // this.CesiumAPI.NavigateObj.zoomIN(this.$parent.$parent.viewer);
        //alert('父组件方法:'+item);
        //this.$refs.cut.getFun('父组件调用子组件方法！');
      },
      closePane:function(val){
        this.cut=null;
      }
    }
  }


</script>


<style scoped>
  .wookroom_right_sider {
    position:absolute;
    top:0px;
    right:100px;
  }
  .wookroom_right_sider ul.wookroom_right_area {
    padding:0 5px;
    background-color:rgba(30,30,30,.9);
  }
  .wookroom_right_sider ul.wookroom_right_area li.wookroom_right_area_item {
    min-width:50px;
    height:30px;
    line-height:30px;
    color:#ffffff;
    list-style:none;
    display:inline-block;
    margin:0 5px;
    cursor:pointer;
  }
  .wookroom_right_name {
    position: relative;
    top: -2px;
    font-size: 15px;
  }
  .wookroom_right_children_name.focus,
  .wookroom_right_name.focus {
    color:#2891bc;
  }
  .wookroom_item_namearea {
    padding:4px 0;
  }
  .wookroom_right_area_children {
    position: absolute;
    margin-top: 0;
    margin-left: -7px;
    width: 100px;
    padding: 5px;
    border: 1px #003cb3 solid;
    background-color:rgba(39,40,41,.9);
  }
  .wookroom_right_area_children li {
    list-style:none;
    cursor:pointer;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .wookroom_right_children_name {
    position: relative;
    top: -2px;
    font-size: 12px;
  }
</style>
